{% extends 'base.html' %}

{% block title %}我的订单 - 外卖订餐系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">我的订单</h2>

    {% if orders %}
        <div class="row">
            {% for order in orders %}
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">订单号: {{ order.id }}</h5>
                        <span class="badge {% if order.status == '待支付' %}bg-warning
                                         {% elif order.status == '已支付' %}bg-success
                                         {% elif order.status == '已取消' %}bg-danger
                                         {% else %}bg-secondary{% endif %}">
                            {{ order.status }}
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-4"><strong>餐厅:</strong></div>
                            <div class="col-8">{{ order.restaurant.name }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-4"><strong>菜品:</strong></div>
                            <div class="col-8">{{ order.food_name }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-4"><strong>数量:</strong></div>
                            <div class="col-8">{{ order.quantity }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-4"><strong>总价:</strong></div>
                            <div class="col-8">¥{{ order.total_price }}</div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-4"><strong>下单时间:</strong></div>
                            <div class="col-8">{{ order.created_at|date:"Y-m-d H:i" }}</div>
                        </div>
                    </div>
                    <div class="card-footer d-flex justify-content-between">
                        {% if order.status == '待支付' %}
                            <a href="{% url 'order:order_pay' order.id %}" class="btn btn-primary">
                                <i class="fas fa-credit-card me-1"></i>立即支付
                            </a>
                            <form method="post" action="{% url 'order:cancel_order' order.id %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-danger" onclick="return confirm('确定要取消这个订单吗？')">
                                    <i class="fas fa-times me-1"></i>取消订单
                                </button>
                            </form>
                        {% elif order.status == '已支付' %}
                            <span class="text-success">
                                <i class="fas fa-check-circle me-1"></i>支付完成
                            </span>
                            {% if order.trade_no %}
                            <small class="text-muted">
                                交易号: {{ order.trade_no }}
                            </small>
                            {% endif %}
                        {% elif order.status == '已取消' %}
                            <span class="text-danger">
                                <i class="fas fa-ban me-1"></i>订单已取消
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="alert alert-info" role="alert">
            <i class="fas fa-info-circle me-2"></i>
            您还没有订单。
            <a href="{% url 'restaurant_list' %}" class="alert-link">去浏览餐厅</a>
        </div>
    {% endif %}
</div>

{% block extra_css %}
<style>
    .card {
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .badge {
        font-size: 0.9em;
        padding: 0.5em 0.7em;
    }
    .card-footer {
        background-color: rgba(0,0,0,.03);
        padding: 1rem;
    }
    .btn i {
        font-size: 0.9em;
    }
</style>
{% endblock %}
{% endblock %}
